<template>
	<view class="content">
		<view class="text-area">
			<view class="top">
				<view class="left">
					<image src="../../static/img/activity/roll.png" mode=""></image>
					<view class="valBox">
						<view>礼卷数</view>
						<view class="val">2</view>
					</view>
				</view>
				<view class="right">
					<image src="../../static/img/activity/integralImg.png" mode=""></image>
				</view>
			</view>
			<!-- 打卡记录 -->
			<view class="record">
				<view class="title">已打卡{{monthVal}}月</view>
				<view class="hint">连续打卡九月，获得{{rollV}}礼卷</view>
				<view class="monthBox">
					<view class="schedule" v-for="(item, index) in clock_record" :key="index" :style="{background: item.state ? '#ed7f49' : '#fafafa', color: item.state ? '#fff' : '#ed7f49' }"  >
						<view class="time">{{item.name}}</view>
						<view class="statusicon">
							<image :src=" item.state ? item.finish : item.iconImg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 打卡享礼卷 -->
			<view class="task">
				<view class="title">打卡享礼卷</view>
				<view class="task_select">
					<image src="../../static/img/activity/nav2.png" mode=""></image>
					<view class="headline">打卡任务2选1</view>
					<!-- 照片打卡 -->
					<view class="photo">
						<view class="left">
							<view class="iconBox">
								<image class="Sicon" src="../../static/img/activity/photo.png" mode=""></image>
								<view>照片打卡</view>
							</view>
							<view class="text">上传1-3张跑步照片，提现时间和公里数</view>
						</view>
						<view class="right">立即打卡</view>
					</view>
					<!-- 视频打卡 -->
					<view class="video">
						<view class="left">
							<view class="iconBox">
								<image class="Sicon" src="../../static/img/activity/video.png" mode=""></image>
								<view>视频打卡</view>
							</view>
							<view class="text">使用KEEP、跑悦圈等运动软件制作视频后上传</view>
						</view>
						<view class="right">立即打卡</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				monthVal:3,
				rollV:"xx",
				clock_record:[
					{name:'1月',state:true,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/integral.png"},
					{name:'2月',state:true,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/redpack.png"},
					{name:'3月',state:false,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/integral.png"},
					{name:'4月',state:false,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/redpack.png"},
					{name:'5月',state:false,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/integral.png"},
					{name:'6月',state:false,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/redpack.png"},
					{name:'7月',state:false,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/integral.png"},
					{name:'8月',state:false,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/redpack.png"},
					{name:'9月',state:false,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/integral.png"},
					{name:'10月',state:false,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/redpack.png"},
					{name:'11月',state:false,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/integral.png"},
					{name:'12月',state:false,finish:"/static/img/activity/accomplish.png",iconImg:"/static/img/activity/redpack.png"}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background: #f4f4f4;
		overflow: hidden;
	}
	.text-area{
		width: 690rpx;
		height: 100vh;
		margin: 0 auto;
		padding: 20rpx 0 0;
		overflow: hidden;
	}
	.text-area .top{
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.text-area .top .left{
		width: 280rpx;
		height: 110rpx;
		border-radius: 55rpx;
		background: linear-gradient(#faf3ed,#f7e6d7);
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #333333;
	}
	.text-area .top .valBox{
		text-align: center;
		margin-left: 10rpx;
	}
	.text-area .top .left .val{
		font-weight: bold;
	}
	.text-area .top .left image{
		display: block;
		width: 130rpx;
		height: 130rpx;
	}
	.text-area .top .right image{
		display: block;
		width: 580rpx;
		height: 440rpx;
		position: absolute;
		right: -220rpx;
	}
	/* 打卡记录 */
	.record{
		height: 390rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 80rpx;
		position: relative;
		z-index: 2;
		padding: 20rpx;
	}
	.record .title{
		font-size: 32rpx;
		font-weight: bold;
		color: #1a1919;
		padding: 20rpx 0 0;
	}
	.record .hint{
		font-size: 20rpx;
		color: #999999;
		font-weight: 400;
		margin: 10rpx 0;
	}
	.monthBox{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.monthBox .schedule{
		width: 100rpx;
		height: 110rpx;
		border-radius: 8rpx;
		background-color: #fafafa;
		margin-top: 10rpx;
		text-align: center;
		font-size: 24rpx;
		padding: 10rpx 0;
	}
	.monthBox .schedule .statusicon{
		display: flex;
		justify-content: center;
	}
	.statusicon image{
		max-width: 50rpx;
		height: 55rpx;
		display: block;
		margin-top: 10rpx;
	}
	/* 打卡享礼卷 */
	.task{
		width: 690rpx;
		height: 300rpx;
		margin: 0 auto;
	}
	.task .title{
		font-size: 32rpx;
		font-weight: bold;
		color: #1a1919;
		margin: 30rpx 0;
		padding: 0 20rpx;
	}
	.task_select{
		height: 340rpx;
		padding: 0 10rpx;
		position: relative;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.task_select image{
		position: absolute;
		display: block;
		width: 280rpx;
		height: 50rpx;
		top: 0;
		margin-left: 205rpx;
	}
	.headline{
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #1a1919;
		position: relative;
		z-index: 2;
		padding: 4rpx 0;
	}
	.photo,.video{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 10rpx;
	}
	.photo{
		border-bottom: 1rpx solid #f4f4f4;
	}
	.photo .iconBox,.video .iconBox{
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #1a1919;
	}
	.photo .iconBox .Sicon,.video .iconBox .Sicon{
		position: relative;
		display: block;
		width: 36rpx;
		height: 30rpx;
		margin: 10rpx;
	}
	.photo .left .text,.video .left .text{
		font-size: 20rpx;
		color: #999999;
	}
	.photo .right,.video .right{
		font-size: 24rpx;
		color: #fff;
		width: 150rpx;
		text-align: center;
		line-height: 50rpx;
		height:50rpx;
		border-radius: 25rpx;
		background: linear-gradient(to right, #eb6a33, #e73f2f);
	}
</style>
